<template>
  <el-form class="bg-dark">
    <el-input @keyup.13="submitForm()" placeholder="账号/手机号" v-model="ruleForm2.loginID">
      <template slot="prepend">
        <i class="icon iconfont icon-yonghu"></i>
      </template>
    </el-input>
    <el-input
      @keyup.13="submitForm()"
      class="masg40"
      placeholder="密码"
      type="password"
      v-model="ruleForm2.password"
    >
      <template slot="prepend">
        <i class="icon iconfont icon-suo"></i>
      </template>
    </el-input>
    <div class="form-group masg40">
      <el-button
        class="btn-block hei46"
        style="font-size: 20px;background:#2f81f1;color:#ffffff;"
        @click="submitForm()"
      >登 &nbsp; &nbsp; 录</el-button>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col text-left">
          <div class="row">
            <div class="col">
              <a class="sp-an" href="/wechat/pc/login">
                <i style="color:#8AE04B; font-size:18px;" class="icon iconfont icon-weixin-"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="col text-right">
          <router-link :to="{name:'resetpassword'}" class="sp-an chead">忘记密码</router-link>
        </div>
      </div>
    </div>
  </el-form>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      ruleForm2: {
        loginID: "",
        password: ""
      }
    };
  },
  methods: {
    async submitForm() {
      try {
        let i = await this.login(this.ruleForm2);
        if (i) {
          this.$router.push("/");
        } else {
          this.error = 1;
        }
      } catch (err) {
        this.$message.error(`错了哦，${err}`);
      }
    },
    ...mapActions(["login"])
  }
};
</script>

<style lang="scss" scoped>
.masg40 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.bg-dark {
  padding: 35px 50px;
}
</style>
